<template>
  <a-dropdown>
    <a class="language-switch" @click.prevent>
      <global-outlined />
      <span class="language-text">{{ currentLanguage }}</span>
    </a>
    <template #overlay>
      <a-menu @click="handleLanguageChange">
        <a-menu-item key="zh-CN">
          <span>简体中文</span>
        </a-menu-item>
        <a-menu-item key="en-US">
          <span>English</span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { GlobalOutlined } from '@ant-design/icons-vue'
import { setLocale } from '@/i18n'

const { locale } = useI18n()

const currentLanguage = computed(() => {
  return locale.value === 'zh-CN' ? '简体中文' : 'English'
})

const handleLanguageChange = ({ key }: { key: string }) => {
  setLocale(key)
}
</script>

<style lang="less" scoped>
.language-switch {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  padding: 0 12px;
  
  &:hover {
    background: rgba(0, 0, 0, 0.025);
  }

  .language-text {
    margin-left: 8px;
  }
}
</style> 